<template>
    <div class="atrr-info">
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">商品参数</span>
                <el-button @click="addAttr" size="small" type="primary" style="margin-left:10px"
                    >自定义添加</el-button
                >
            </div>

            <el-form :model="goodsAttr" :rules="rules" ref="attrForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="商品品牌" prop="brand">
                            <el-input v-model="goodsAttr.brand"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="供应商" prop="supplierId">
                            <el-select
                                v-model="goodsAttr.supplierId"
                                placeholder="请选择"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in supplierList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="单件规格" prop="singleSpecification">
                            <el-input v-model="goodsAttr.singleSpecification"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="产地" prop="region">
                            <el-input v-model="goodsAttr.region"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item label="保质期" prop="validPeriod">
                            <el-input v-model="goodsAttr.validPeriod"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 动态添加 -->
                    <el-col
                        :span="10"
                        v-for="(item, index) in goodsAttr.selfDefinition"
                        :key="index"
                    >
                        <el-form-item :label="Object.keys(item)[0]" :prop="item.key">
                            <el-input
                                v-model="goodsAttr.selfDefinition[index][Object.keys(item)[0]]"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <el-dialog title="添加参数" :visible.sync="addAttrVisible" :before-close="clearForm">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-row type="flex" justify="center">
                    <el-form-item prop="addLableText">
                        <el-input v-model="ruleForm.addLableText"></el-input>
                    </el-form-item>
                    <span class="intput-text">:</span>
                    <el-form-item prop="addLableValue">
                        <el-input v-model="ruleForm.addLableValue"></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button @click="clearForm">取 消</el-button>
                <el-button type="primary" @click="confirmAddAttr">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getSupplierList } from '@/api/goodsBase';
import { mapGetters } from 'vuex';
export default {
    name: 'atrrInfo',
    porps: {
        mode: ''
    },
    mounted() {
        this.init();

        // 此阶段props值不一定能取到，使用路由判断
        if (this.$route.path.indexOf('updateProduct') > -1) {
            this.opmode = 1;
            // conerMarkId 为string类型，但是传过来是num类型， 坑
        } else {
            this.opmode = 0;
        }
    },
    computed: {
        ...mapGetters(['goodsDetailInfo'])
    },
    watch: {
        goodsDetailInfo: function() {
            this.goodsAttr = {
                ...this.goodsAttr,
                ...this.goodsDetailInfo.attribute
            };
        }
    },
    data() {
        return {
            opmode: 0,
            goodsAttr: {
                brand: '',
                selfDefinition: []
            },
            addAttrVisible: false,
            ruleForm: {
                addLableText: '',
                addLableValue: ''
            },
            supplierList: [],
            rules: {
                addLableText: [{ required: true, message: '请输入参数名', trigger: 'change' }],
                addLableValue: [{ required: true, message: '请输入参数值', trigger: 'change' }],
                supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }]
            }
        };
    },
    methods: {
        init() {
            getSupplierList().then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data;
                } else {
                    this.supplierList = [];
                }
            });
        },
        confirmAddAttr() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    this.goodsAttr.selfDefinition.push({
                        [this.ruleForm.addLableText]: this.ruleForm.addLableValue
                    });
                    this.addAttrVisible = false;
                } else {
                    this.$message.error('信息输入错误');
                }
            });
        },
        addAttr() {
            this.addLableText = '';
            this.addLableValue = '';
            this.addAttrVisible = true;
            // 需要改正
        },
        clearForm() {
            this.$refs['ruleForm'].resetFields();
            this.addAttrVisible = false;
            return false;
        },
        validateForm() {
            return this.$refs['attrForm'].validate();
        }
    }
};
</script>

<style scoped>
.search-title {
    font: 18px;
    font-weight: bold;
}
.atrr-info {
    width: 900px;
}
.intput-text {
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    margin: 0 5px;
}
</style>
